<script setup>
import { usePhotoStore } from '@/stores/photoStore'

const store = usePhotoStore()
const currentFace = computed(() => 
  store.groupedFaces[store.selectedFaceIndex]
)

// AI生成人物描述
const aiDescription = ref('')
const generateDescription = async () => {
  const res = await fetch('/api/ai-description', {
    method: 'POST',
    body: JSON.stringify({
      photos: currentFace.value.photos.slice(0,5)
    })
  })
  aiDescription.value = await res.json()
}
</script>

<template>
  <aside class="sidebar">
    <div class="face-header">
      <AvatarCluster :photos="currentFace.photos" />
      <h3>{{ currentFace.name || '未命名人物' }}</h3>
      <p>出现次数：{{ currentFace.photos.length }}次</p>
    </div>
    <TimelineSparkline :timeline="currentFace.timeline" />
    <div class="ai-section">
      <button @click="generateDescription">
        <i class="fa-solid fa-wand-magic-sparkles" /> 生成智能描述
      </button>
      <p v-if="aiDescription">{{ aiDescription }}</p>
    </div>
  </aside>
</template>